<!-- <p-button (click)="showDialog()" icon="pi pi-external-link" label="上传图片"></p-button> -->

<!-- <p-dialog [(visible)]="visible"> -->
<div class="custom-file-input">
  <input type="file" id="fileInput" (change)="fileChangeEvent($event)" style="display: none;">
  <p-button icon="pi pi-plus" (click)="onFileButtonClick()" label="选择图片"> </p-button>
</div>
<br>
<!-- <input  type="file" (change)="fileChangeEvent($event)" accept="image/*" /> -->

<div class="cropper-wrapper">
  <image-cropper [imageChangedEvent]="imageChangedEvent" [imageURL]="imageURL" [maintainAspectRatio]="true" [containWithinAspectRatio]="containWithinAspectRatio" [cropperMinWidth]="128" [aspectRatio]="aspectRatio" [onlyScaleDown]="true" [roundCropper]="false" [canvasRotation]="canvasRotation" [(transform)]="transform" [alignImage]="'center'" [style.display]="showCropper ? null : 'none'" [allowMoveImage]="allowMoveImage" [hidden]="hidden" imageAltText="Alternative image text" backgroundColor="#1f2d40" output="blob" format="png" (wheel)="onWheel($event)" (imageCropped)="imageCropped($event)" (imageLoaded)="imageLoaded()" (cropperReady)="cropperReady($event)" (loadImageFailed)="loadImageFailed()"></image-cropper>
  <div *ngIf="loading" class="loader">Loading...</div>
</div>
<img [src]="croppedImage" [style.border]="croppedImage ? '1px solid black' : 'none'" />
<div class="flex flex-wrap justify-center items-center gap-2">
  <p-button icon="pi pi-chevron-up" (click)="goUp()"></p-button>
  <p-button icon="pi pi-chevron-down" (click)="goDown()"></p-button>
  <p-button icon="pi pi-chevron-left" (click)="goLeft()"></p-button>
  <p-button icon="pi pi-chevron-right" (click)="goRight()"></p-button>
  <p-button icon="pi pi-search-plus" (click)="zoomIn()"></p-button>
  <p-button icon="pi pi-search-minus" (click)="zoomOut()"></p-button>
  <p-button icon="pi pi-replay" (click)="reset()"></p-button>
  <p-button icon="pi pi-check" (click)="confirm()"></p-button>
</div>
<!-- <div class="flex flex-wrap justify-center items-center gap-2">
  <label htmlFor="url1">图片地址</label>
  <input type="text" pInputText class="w-full p-inputtext-sm" placeholder="图片地址" [(ngModel)]="imgUrl" />
</div> -->
<!-- </p-dialog> -->
